<template>
    <van-row>
        <van-col span="24" class="panal" v-for="(item,index) in news" :key='item.index'>
          <router-link :to="{path:item.url}">
            <van-col span='7' class="newsimg"><img :src="item.img" width="100%" height="100%" /></van-col>
            <van-col span='17' class="newsbody">
              <div class="newstitle">
                {{item.title}}
              </div>
            </van-col>
            <van-col span="24" class="newsfooter">
              <van-col span="6">{{item.source}}</van-col>
              <van-col span="6">{{item.author}}</van-col>
            </van-col>
          </router-link>
        </van-col>
    </van-row>
</template>

<script>
export default {
  components: {

  },
  methods: {

  },
  data() {
    return {
      news: [{
        url: '/',
        img: '/static/one.PNG',
        title: '所有制和竞争能否中立，困扰着民营企业家',
        source: '观察者网',
        author: '观察者网'
      }, {
        url: '/',
        img: '/static/one.PNG',
        title: '被美制裁后，中国芯片企业首发声',
        msg: '“11月3日，福建晋华在公司官网对美国制裁行为发表声明',
        source: '凤凰网'
      }, {
        url: '/',
        img: '/static/one.PNG',
        title: '发表辱华言论，澳大利亚天空新闻台主持人被解雇',
        msg: '“早上好，很高兴见到你。”南海海面上，中国海军“兰州”舰对日本海自吨位最大的现役舰艇“加贺”如此喊话。',
        source: '观察者网',
        author: '观察者网'
      }, {
        url: '/',
        img: '/static/one.PNG',
        title: '傅莹：能不能有一天，由我们自己最先对外提供一手信息？',
        source: '观察者网'
      }, {
        img: '/static/two.png',
        title: '美国让欧盟“404”？他们怒了并@中国俄罗斯',
        source: '观察者网',
        author: '观察者网'
      }, {
        url: '/',
        img: '/static/one.PNG',
        title: '美媒炸了！尼日利亚枪杀数十穆斯林：特朗普说的',
        source: '观察者网'
      }, {
        url: '/',
        img: '/static/one.PNG',
        title: '日媒公布通话录音 兰州舰南海向海自打招呼：Good Morning',
        source: '观察者网'
      }]
    }
  }
}
</script>
<style scoped>
    a .newsfooter{
        color:#7b7b7b;
      }
    .panal{
      height:125px;
      overflow: hidden;
      padding-top:5px;
      padding-bottom: 5px;
      border-bottom:1px #ccc solid;
      border-top:1px #ccc solid;
    }
    .newsimg {
      display:table-cell;
	    vertical-align:middle;
      text-align: center;
       display: -webkit-box;
     -webkit-box-align: center;
     -webkit-box-pack: center;
     display: box;
     box-align: center;
     box-pack: center;
     line-height:90px;
    }
    .newsimg img{
      vertical-align: middle;
    }
    .newsbody{
      padding-right:10px;
      padding-left:10px;
    }
    a .newsbody{
      color:#000;
    }
    .newstitle{
      padding-top:10px;
      padding-bottom:10px;
      font-size:16px;
      line-height:30px;
    }
    .newsfooter{

    }
</style>
